<!DOCTYPE html>
<html><!--开始标签（大的根标签）-->

<!--在根标签底下注释样式为当前这样-->
    <head><!--开始标签（子标签）只包含两个子标签<head>和<body>-->
        <meta charset="UTF-8"><!--自闭合标签（一般不包含内容）这个标签非常重要，不能删-->
              <!--属性-->
        <title>峰凌二部</title><!--标题标签-->
        <!--<style> 标签包含了 HTML 文档的样式详细，在默认情况下，在该元素内写入的样式指令将被认为是CSS。-->
        <style>

            /*在子标签底下注释样式为当前这样*/

            /*对所有元素样式的修改*/
            *{
              margin: 0;
                padding: 0;
            }

            body{
                color: #999999;
                font-size: 14px;
            }
            a{
                color: #000000;

            }

            .top{
                text-align: right;
                padding: 10px;

            }

            .top a{
                margin-left: 8px;
                padding: 3px;
            }

            .top a last-child{
                background-color: #398bfb;
                color: #ffffff;
            }
            .main{
                text-align: center;
                margin-top: 20px;
            }

            .main .logo img{
                width: 270px;

            }
            .main form {
                margin-top: 10px;

            }
            .main form input{
                width: 500px;
                line-height: 36px;
                padding: 0 5px;/*内边距，上下为0，左右为5*/
                font-size: 16px;
                vertical-align: middle;
            }
            .main form button{
                height: 40px;
                line-height: 38px;
                background-color: #3385ff;
                color: #ffffff;
                border: none;
                vertical-align: middle;
                width: 100px;
                letter-spacing: 3px;
            }
            .foot{
                text-align: center;
                position: fixed;
                bottom: 20px;
                width: 100%;
                margin: 0 auto;

            }
            .foot ul{
                list-style: none;
                margin:0 10px;
            }
            .foot ul li{
                display: inline-block;
                margin: 0 auto;
            }









        </style>
    </head><!--结束标签-->
<!--<body>标签表示 HTML 网页的主体部分，该标签内的内容使用户可以看到的。一个 HTML 文件只能存在一个 <body> 标签。 -->
    <body><!--开始标签（子标签）-->


    <!-- 头部 -->
        <div class="top">
        <a href="#">新闻</a>
        <a href="#">hao123</a>
        <a href="#">地图</a>
        <a href="#">视屏</a>
        <a href="#">贴吧</a>
        <a href="#">学术</a>
        <a href="#">登陆</a>
        <a href="#">设置</a>
        <a href="#">更多产品</a>

    </div>

    <!--  正文-->
    <div class="main">
       <!-- div块状矩形区域-->
        <div class="logo">
            <!--图片-->
            <img src="http://www.baidu.com/img/bd_logo1.png?qua=high" alt="">

        </div>
        <form action="https://www.baidu.com/s"method="get">
            <!--搜索框-->
            <input type="text" name="wd">
            <!--搜索按钮-->
            <button>点我一下</button>
        </form>
    </div>

    <!--页脚-->
    <div class="foot">

        <div>
            <img src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png" alt="">
            <p>百度</p>

        </div>

        <ul>

            <li>把百度设为首页</li>
            <li>关于百度</li>
            <li>百度推广</li>

        </ul>
        <div>
            &copy;2019 Baidu 使用百度前必读 意见反馈 京ICP证030173号  京公网安备11000002000001号

        </div>



    </div>

    </body><!--结束标签-->
</html><!--结束标签-->